@extends('layout.header')


@section('tou') 
     <title>商品详情</title>
      <link rel=stylesheet href="/goodsdetails/store.css">
     
@endsection


@section('zhongjian')

      <a data-monitor="huodong_top_top" class="mod-topbar" href="" target=_blank data-src="https://p.ssl.qhmsg.com/t0175ad361058c9d685.jpg"></a>
      <div class="top-container">
         <div class="header-logo">
              <a class="sellogo" href="" data-monitor="home_title_logo">
              <img src="/360nhome/t013cfce5d46cdb1b5f.png"></a>
         </div>
         <div class="header-tools">
          <div class="suggest-box">
             <form id="__mall_search_form__" action="/search/">
                <input type="text" id="__mall_search_kw__" class="suggest" name="q">
                <input type="submit" value="" class="search-btn" id="__mall_search_btn__" data-monitor="home_search_button">
             </form>
             <p class="searchkey">
	              <a href="" target="_blank">360手机Q5</a>
	              <a href="" target="_blank">360儿童手表5C</a>
	              <a href="" target="_blank">360儿童机器人</a>
	              <a href="" target="_blank">360手机N4S</a>
             </p>
          </div>
          <div class="topshopcart">
             <a href="" target="_blank" class="header-cart" data-monitor=home_title_shopcart>
              <i class="icon"></i>我的购物车
              <span class="cart-size">(0)</span></a>
             <div class="header-cart-popup">
              <div class="cart-tips">正在加载购物车...</div>
              <div class="cart-info"></div>
             </div>
          </div>
         </div>
      </div>
      <div class="navbox">
         <div class="top-container">
          <div class="sublistbox"></div>
          <ul class="navbar column-list clearfix">
            <li class="top-item topfirst">
            <a data-monitor="home_fenlei_allgoods" href="" target="_blank">全部智能酷品</a></li>
            <li class="top-item" data-type="1">
            <a href="" data-monitor="home_title_goods1" target="_blank">手机</a></li>
            <li class="top-item" data-type="2">
            <a href="" data-monitor="home_title_goods2" target="_blank">行车记录仪</a></li>
            <li class="top-item" data-type="3">
            <a href="" data-monitor="home_title_goods3" target="_blank">儿童手表</a></li>
            <li class="top-item" data-type="4">
            <a data-monitor="home_title_goods4" href="" target="_blank">智能摄像机</a></li>
            <li class="top-item" data-type="5">
            <a data-monitor="home_title_goods5" href="" target="_blank">路由器</a></li>
            <li class="top-item" data-type="6">
            <a data-monitor="home_title_goods5" href="#" target="_blank">儿童机器人</a></li>
            <li class="top-item" data-type="7">
            <a data-monitor="home_title_goods6" target"=_blank" href="#">智品牌</a></li>
            <li class="top-item" data-type="8">
            <a data-monitor="home_title_goods7" target="_blank" href="">一元夺宝</a></li>
            <li class="top-item" data-type="9">
            <a data-monitor="home_title_goods8" target="_blank" href="">试用</a></li>
            <li class="top-item" data-type="10">
            <a data-monitor="home_title_goods9" href="">社区</a></li></ul>
	        <div class=navad>
	            <a data-monitor="home_menu_resource" href="">
	              <img src="/360nhome/t012aef5b309b96dffb.gif"></a>
	        </div>
         </div>
      </div>
   </div>

	 <div class="gdetail">
         <div class="prodIntro">
            <div class="sPic">
                <dl class="picbox">
                    <dt class="bigImg">
                        <div id="winSelector" style="display:none"></div>
                        <img src="{{ $res->goodspic }}"></dt>
                    <dd id="pic-selector" class="pic-selector">
                        <i class="left leftdisabled"></i>
                        <div class="scroll">
                            <div class="scroll-items">
                           @foreach($row as $k=>$v)
                                <a class="tinypic" href="javascript:;">
                                    <img src="{{ $v->goodspicname }}"></a>
                            @endforeach
                            </div>
                        </div>
                        <!-- <i class="right"></i> -->
                    </dd>
                </dl>
            </div>
            <div class="sInfo">
                <a name="sInfo"></a>
                <div class="tr nobdr">
                    <strong>{{ $res->goodsname }}（现货开放购买）</strong>
                    <p class="slogan">{{ $res->goodsdes }}</p>
                </div>
                <div style="margin-top:10px" class="tr nobdr tr1">
                    <div class="txt">
                        <strong class="nowprice">                                 
                            <em>￥</em>{{ $res->goodsprice }}</strong></div>
                    <div class="txt">
                        <span>颜色</span>
                        <ul data-monitor="goodsdetails_fenlei_click" id="glist" class="glist">
                            <li>
                                <a title="移动4G阳光白" href="">阳光白</a></li>
                            <li>
                                <a title="必备套装" href="">玫瑰金</a></li>
                            <li class="cur">
                                <a title="" href="">黑色</a></li>
                            <li>
                                <a title="全网通星空灰" href="">星空灰</a></li>
                        </ul>
                    </div>
                    <div class="txt">
                        <span style="margin-top:6px">数量</span>
                        <div data-monitor="goodsdetails_number_click" class="gcIpt">

                        <form action="/Home/goodsdetails/goods" method="post" id="gwc">
                            <a data-num="-1" class="decrement disabled" href="javascript:void(0);">-</a>

                       
                            <input type="hidden" name="id" id="id" value="{{ $res->id }}">
                            <input type="text" name="num" value="1" class="goodsCount">

                            <a data-num="1" class="increment" href="javascript:void(0);">+</a></div>
                                 {{ csrf_field() }}
                    </div>
                    <p class="cl mianze"></p>
                </div>
                <div class="tr nobdr btns">
                    <button data-monitor="goodsdetails_buy_click" class="gInfoBtn gInfoBtn-addcart">
                        <span class="gInfoBtn-icon gInfoBtn-icon-cart"></span>加入购物车</button>
                     </form>
                        <a href="javascript:void(0);" class="favorite nofav" data-monitor="goodsdetails_favorite_click"> 
                            <span class="gInfoBtn-icon gInfoBtn-icon-heart"></span>喜欢</a> 
                    <div style="clear:both"></div>
                </div>
                <div class="tr nobdr">
                    <div class="txt">
                        <span>保障</span>
                        <ul class="guarantee">
                            <li class="shop_info">
                                <i>
                                </i>360商城发货&amp;售后</li>
                            <li class="postage_free">
                                <i>
                                </i>满99元包邮</li>
                            <li class="sales_return">
                                <i>
                                </i>7天无理由退货</li>
                            <li class="sales_replace">
                                <i>
                                </i>15天免费换货</li>
                        </ul>
                    </div>
                </div>
            </div>
         </div>  
         <div style="width:100%" class="c">
             <a name="gInfo"></a>
             <div class="gTab">
                <div class="tab-bar">
                    <div class="links">
                        <a data-monitor="goodsdetails_product_click" class="cur" href="javascript:void(0);">产品详情</a>
                        <a data-monitor="goodsdetails_standard_click" href="#gArg">规格参数</a>
                        <a data-monitor="goodsdetails_problem_click" href="#gConsult">常见问题</a>
                        <a data-monitor="goodsdetails_try_click" class="gotry" href="#gTry">商品评论</a>
                    </div>
                </div>
             </div>
             <div class="gCon widecontent">
                <style>
                   .wide_screen_box p{
                    background:no-repeat center top;
                    margin:0;
                    padding:0;
                    width:auto
                    }
                    .wide_screen_box a{
                        text-decoration:none
                        }
                    .wide_screen_box a p{
                        cursor:pointer
                        }
                </style>
                <div class="wide_screen_box">
                    <p style="background-image: url(&quot;http://p0.qhimg.com/t010c2751a5deb20853.jpg&quot;); height: 804px;"></p>
                    <p style="background-image: url(&quot;http://p8.qhimg.com/t01c98a3741e8db3d95.jpg&quot;); height: 678px;"></p>
                    <p style="background-image: url(&quot;http://p3.qhimg.com/t0137094167b6c8463a.jpg&quot;); height: 534px;"></p>
                    <p style="background-image: url(&quot;http://p6.qhimg.com/t01a6c098d6b8c0f5d4.jpg&quot;); height: 707px;"></p>
                    <p style="background-image: url(&quot;http://p1.qhimg.com/t01aea45cf4b24c8ebe.jpg&quot;); height: 1452px;"></p>
                    <p style="background-image: url(&quot;http://p0.qhimg.com/t01f744c2aa6a3ef180.jpg&quot;); height: 858px;"></p>
                    <p style="background-image: url(&quot;http://p1.qhimg.com/t01cccde5cd7c013b90.jpg&quot;); height: 978px;"></p>
                    <p style="background-image: url(&quot;http://p1.qhimg.com/t0158aee02b2d2758d8.jpg&quot;); height: 989px;"></p>
                    <p style="background-image: url(&quot;http://p5.qhimg.com/t018e2b4e6f9c63b806.jpg&quot;); height: 966px;"></p>
                    <p style="background-image: url(&quot;http://p1.qhimg.com/t0173c4f16de30e84f6.jpg&quot;); height: 1218px;"></p>
                    <p style="background-image: url(&quot;http://p2.qhimg.com/t016883c91fae4c8cef.jpg&quot;); height: 307px;"></p>
                   <!-- <script>
                        function setWideImgHeight(e, t) {
                                var n = new Image;
                                n.onload = function() {
                                    var e = n.height;
                                    $(t).css("height", e)
                                },
                                n.src = e
                            }
                            // function setWideImgs(e) {
                            //     for (var t = 0; t & lt; e.length; t++) {
                            //         var n = $(e[t]),
                            //         r = n.css("background-image"),
                            //         i = r.substring(4, r.length - 1);
                            //         i = i.replace(/(\"|\')/g, ""),
                            //         setWideImgHeight(i, n)
                            //     }
                            // }
                            // setWideImgs($(".wide_screen_box").find("p"))
                    </script> -->
                </div>
             </div>
             <div class="gTit">规格参数
                <a style="display:block;margin-top:-120px;visibility:hidden" name="gArg"></a>
             </div>
              <div class="gCon">
                <div class="gArg"></div>
                <table cellspacing="0" cellpadding="0" class="col2">
                    <tbody>
                        <tr>
                            <td class="wd207">存储卡类型</td>
                            <td>SIM1：支持 Nano－SIM 卡； SIM2：兼容 Nano－SIM 卡与 Micro SD 卡，可根据使用需求放置，只能放其中一种。</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">电池容量</td>
                            <td>3080mAh(typ)/3000mAh(min)</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">重量</td>
                            <td>155g</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">处理器</td>
                            <td>MT 6797M最高主频2.0GHz；Mali-T880图形处理器 700MHz</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">操作系统</td>
                            <td>360 OS Android M</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">VoLTE</td>
                            <td>支持</td></tr>
                        <tr>
                            <td class="wd207">网络制式</td>
                            <td>移动4G（移动4G、移动3G、移动/联通2G）；全网通（移动4G/3G/2G、 联通4G/3G/2G 、电信4G/3G/2G）</td></tr>
                        <tr>
                            <td class="wd207">双卡使用说明</td>
                            <td>任意一张SIM卡可选4G网络，另外一张为GSM网络（2张电信卡不能同时使用）</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">摄像头</td>
                            <td>后置相机：索尼1300万像素图像传感器；前置相机：500万像素</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">OTG</td>
                            <td>支持</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">分辨率</td>
                            <td>1920x1080</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">机身尺寸</td>
                            <td>高度：149mm ；宽度：75.7mm ；厚度：8.3mm</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">屏幕尺寸</td>
                            <td>5.5 英寸</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">存储</td>
                            <td>4GB RAM LPDDR3；32GB机身存储 eMMC 5.0；128GB存储扩展 MicroSD卡</td>
                        </tr>
                        
                        <tr>
                            <td class="wd207">包装清单</td>
                            <td>手机、电源适配器、USB 数据线、SIM 卡顶针、手机保修证书、手机说明书</td>
                        </tr>
                    </tbody>
                </table>
              </div>
              <div class="gTit">
                <a style="display:block;position:relative;top:-100px;visibility:hidden" name="gConsult"></a>常见问题
             </div>
              <div class="gCon">
                <dl class="consult">
                    <dt>
                        <big>1、</big>
                        <i>
                        </i>订单提交成功后还可以修改收货信息吗？</dt>
                    <dd>
                        <i>
                        </i>订单付款之前，您可以进入“我的订单”，在订单详情页内修改收货信息。付款之后将不可修改收货信息。</dd>
                    <dt>
                        <big>2、</big>
                        <i>
                        </i>支付完成后还能取消订单吗？如何取消？</dt>
                    <dd>
                        <i>
                        </i>支付完成后，配货之前可以取消订单，您可以进入“我的订单”，直接点击订单后面取消按钮。</dd>
                    <dt>
                        <big>3、</big>
                        <i>
                        </i>订单取消后还能恢复吗？</dt>
                    <dd>
                        <i>
                        </i>订单一旦取消后将无法恢复，请您慎重操作。</dd>
                    <dt>
                        <big>4、</big>
                        <i>
                        </i>订单取消成功后退款如何返还？</dt>
                    <dd>
                        <i>
                        </i>订单取消后，退款会按照您购买时的支付方式原路返回到您的银行卡/支付宝账户。</dd>
                    <dt>
                        <big>5、</big>
                        <i>
                        </i>对商品不满意可以申请退换货吗？如何操作？</dt>
                    <dd>
                        <i>
                        </i>在确认收货后，7天之内可以申请退货，15之内可以进行换货，具体操作如下:
                        <br>进入“我的订单”，在操作区域中点击申请退换货，填写问题描述，提交服务单即可完成申请。</dd>
                    <dt>
                        <big>6、</big>
                        <i>
                        </i>为什么我的订单总是无法提交成功？</dt>
                    <dd>
                        <i>
                        </i>可能存在以下几种情况：
                        <br>（1）订单信息填写不完整
                        <br>（2）订单商品库存不足或者库存无货；
                        <br>（3）网络延时及以上各种情况都会在页面中弹出提示信息，可以通过修改订单信息（提示信息）或者稍后再试，即可成功提交订单。</dd>
                    <dt>
                        <big>7、</big>
                        <i>
                        </i>订单已提交成功，如何付款？</dt>
                    <dd>
                        <i>
                        </i>您好，360商城目前支持的支付方式分为以下几种，请在订单提交后2小时内付款完成：
                        <br>（1）网上银行
                        <br>（2）第三方支付：包括支付宝。</dd>
                    <dt>
                        <big>8、</big>
                        <i>
                        </i>订单已支付成功，什么时候可以发货？</dt>
                    <dd>
                        <i>
                        </i>您好，订单提交成功后我们会尽快发货，详细进度您可进入“我的订单”实时查看。详见
                        <a target="_blank" href="http://mall.360.com/user/myorder">我的订单&gt;&gt;</a></dd>
                    <dt>
                        <big>9、</big>
                        <i>
                        </i>订单发货后，还可以改送到其他地方吗？</dt>
                    <dd>
                        <i>
                        </i>订单一旦提交成功，将无法修改。请在提交订单前仔细检查核对。</dd>
                    <dt>
                        <big>10、</big>
                        <i>
                        </i>我的地址比较偏僻，你们能送到吗？</dt>
                    <dd>
                        <i>
                        </i>一般情况下，邮局可覆盖的范围我们均可以为您配送到。</dd>
                    <dt>
                        <big>11、</big>
                        <i>
                        </i>我订购的手机，忘记选择发票怎么办？</dt>
                    <dd>
                        <i>
                        </i>手 机类商品，为了保证您能充分享受生产厂家提供的售后服务（售后服务需根据发票确认您的购买日期），不管您是否选择开具发票，都将随单为您开具，发票内容默 认为您订购的商品全明细，不支持修改发票内容。请认真填写发票抬头并核对，若您未填写发票抬头，默认抬头“个人“，订单付款前是可以自行修改发票内容。</dd>
                </dl>
              </div>
             <div id="tryContent">
                  <div class="gTit">
                     <a style="display:block;position:relative;top:-100px;visibility:hidden" name="gTry"></a>商品评论
                     <span class="vmore"></span>
                  </div>
                  <div class="gCon">
                     <div class="trycontent">

                        <style type="text/css">
                                .mc{
                                    padding:30px 0;
                                    /*overflow:hidden;*/
                                    width:100%;
                                    height:150;
                                   
                                }
                                .rate{
                                    width:190px;
                                    height:76px;
                                    text-align: center;
                                    float:left;
                                    
                                }
                                .rate strong {
                                    font: 400 46px/30px arial;
                                    color: #e4393c;
                                }
                                .rate strong span {
                                    font-size: 24px;
                                    color: #e4393c;
                                }
                                .rate span {
                                    color: #666;
                                    font-family: arial;
                                }
                                .percent{
                                    width:186px;
                                    height:90px;
                                    
                                    float:left;
                                }
                                .percent dt{
                                    display:block;
                                    width: 70px;
                                    color: #999;
                                }

                               dl {
                                     display: block;
                                    -webkit-margin-before: 1em;
                                    -webkit-margin-after: 1em;
                                    -webkit-margin-start: 0px;
                                    -webkit-margin-end: 0px;
                                }
                                .actor-new{
                                    width:590px;
                                    height:90px;
                                }
                                #dt{
                              
                                    margin-left:380px;
                                    width:100px;
                                    height:15px;

                                }
                                .actor-new dd{

                                    width:460px;
                                    height:62px;
                                    margin-left:470px;
                                    margin-top:-14px;
                                }

                              .p-bfc li{
                                    width:90px;
                                    height:21px;
                                    background:#eef1ff;
                                    font-size:14px;
                                    margin:2px 4px;
                                    float:left;
                                }


                            /*评论*/
                              .comments{           
                                    width:100%;
                                    height:auto;
                                    border-top:1px solid #ddd;
                                    /*margin-bottom:10px;*/
                                } 

                             .left{
                                    width:140px;
                                    height:140px;
                                    position:relative;
                             }
                             .from-whom{
                                    width:60px;
                                    height:60px;
                                    padding-top:15px;
                                    margin-left:30px;

                             }

                              .from-whom >img{
                                display:inline;
                              }

                             .from-username{
                                    width:120px;
                                    height:20px;
                                    margin-top:15px;
                             }

                             .from-level{
                                    width:120px;
                                    height:20px;
                                    margin-top:5px;
                             }

                             .from-level >span{
                                font-size:12px;
                             }

                            /*右侧评论时间  内容*/
                            .right-comment{
                                    width:85%;
                                    height:auto;
                                    position:relative;
                                    left:140px;
                                    top:-130px;
                            }

                         

                            .top-comment{
                                    width:95%;
                                    height:35px;
                                    text-align:left;
                                    line-height:35px;
                               
                            }
                            
                            .center-comment-img{
                                    width:95%;
                                    height:50px;
                                    float:left;
                                    margin-top:5px;
                            }

                            .center-comment-img img{
                                    float:left;
                                    border:solid 3px #F0F0F0;
                                    background-size:contain;
                                    cursor:pointer;
                            }

                               /*大图*/
                            .commentimg{
                                width:280px;
                                height:330px;
                                margin-top:70px;
                                border:solid 2px #DDDDDD;
                                display:none;
                            }

                            .shouqi{
                                height:40px;
                                width:40px;
                                cursor:pointer;
                                line-height:40px;
                                font-size:14px;
                                background:#DDDDDD;
                                font-color:white;
                                border-radius:50%;
                            }

                            /*评论时间  内容  回复*/
                            .time-comment{
                                     width:95%;
                                     height:20px;
                                     margin-top:80px;
                            }

                            .timefelt{
                                position:absolute;
                                left:2px;
                            }

                            .dianzan{
                                position:absolute;
                                right:70px;
                            }

                            .replycom{
                                cursor:pointer;
                            }

                            .reply{
                                width:500px;
                                height:100px;
                                margin-left:350px;
                                border:solid 1px #eee;
                                display:none;
                            }

                            .dian{
                                cursor:pointer;
                            }

                            .huifu{
                                cursor:pointer;
                            }
                        </style>

                        <div class="mc">                         
                           <div class="rate">              
                              <strong>94<span>%</span></strong>               
                               <br> <span>好评度</span>          
                           </div>     
                           <div class="percent">             
                                 <dl>                   
                                  <dt>好评<span>(94%)</span></dt>                
                                  <dd class="d1"><div style="width: 94px;"></div></dd>
                                 </dl>    

                                 <dl>              
                                   <dt>中评<span>(3%)</span></dt>              
                                   <dd class="d1"><div style="width: 3%;"></div></dd>        
                                 </dl>   

                                 <dl>              
                                    <dt>差评<span>(3%)</span></dt>           
                                    <dd class="d1">                  
                                         <div style="width: 3%;"></div>
                                    </dd>          
                                 </dl>         
                           </div>           
                           <div class="actor-new">           
                                   <dl>                  
                                     <dt id="dt">买家印象：</dt>               
                                     <dd class="p-bfc">
                                        <li class="comm-tags">
                                            <span>性能不错</span>(318)
                                        </li>
                                        <li class="comm-tags">
                                            <span>外观漂亮</span>(305)
                                        </li>
                                        <li class="comm-tags">
                                            <span>配置不错</span>(279)
                                        </li>
                                        <li class="comm-tags">
                                            <span>性价比高</span>(272)
                                        </li>
                                        <li class="comm-tags">
                                            <span>东西不错</span>(259)
                                        </li>
                                        <li class="comm-tags">
                                            <span>散热很好</span>(251)
                                        </li>
                                        <li class="comm-tags">
                                            <span>速度快</span>(241)
                                        </li>
                                        <li class="comm-tags">
                                           <span>硬件不错</span>(214)
                                        </li>
                                        <li class="comm-tags">
                                            <span>键盘不错</span>(202)
                                        </li>
                                        <li class="comm-tags">
                                            <span>开机速度</span>(200)
                                        </li>             
                                     </dd>            
                                </dl>  
                           </div>  
                        </div>
                   
                        @foreach($result as $k =>$v)
                        <div class="comments">
                        <!-- 左侧图片  用户名   等级 -->
                            <div class="left">
                                <div class="from-whom">
                                @if(empty($v->picname))
                                    <img src="/upload/1.jpg" alt=""height="50px" width="50px">
                                @else
									 <img src="{{ $v->picname }}" alt=""height="50px" width="50px">
                                @endif
                                </div>
                                <div class="from-username"><span>{{ $v->username }}(匿名)</span></div>
                                <div class="from-level"><span>等级:{{ getLevel($v->level) }}</span></div>
                           </div>

                       <!-- 右侧评论  图片  时间 -->
                          <div class="right-comment">
                                <!-- 评论 -->
                               <div class="top-comment">
                                    <span>评论内容 想些啥写啥{{ $v->content }}</span>
                               </div>
                               <div class="center-comment-img">
                               		@if(!empty($v->pic))
                                    <img class="dianji" src="{{ $v->pic }}" alt="" style="height:50px;width:50px;">
                               		@endif
                               </div>
                               <div class="commentimg">
                                    <div class="shouqi">收起</div>
                                    @if(!empty($v->pic))
                                    <img src="{{ $v->pic }}" alt="" style="height:260px;width:230px">
                                    @endif
                               </div> 
                               <div class="time-comment">
                                   <span class="timefelt">{{ $v->posttime }}</span>
                                   <span class="replycom">商家回复</span> 
                                   <span style="display:none" class="id">{{ $v->id }}</span>
                                   <span class="dianzan"><span class="dian">点赞</span>(<span>{{ $v->zan }}</span>)&nbsp;&nbsp;&nbsp;&nbsp;<span class="huifu">回复</span>(<span>1</span>)</span>
                               </div>
                           </div> 
                           <div class="reply">商家回复:&nbsp;&nbsp;&nbsp;{{ $v->reply }}</div>
                         </div>
                        @endforeach
                     </div> 
                 </div>    
             </div>
         </div>
     </div>
	
    

    <style type="text/css">
    #quc_account{ border:solid 1px #B7B7B7; }
    #quc_password{ border:solid 1px #B7B7B7; }

    #page{
    	position:fixed;
    	top:98.5%;
    	left:50%;
    	margin-top:-50px;
    	margin-left:520px;
    	padding:9px 4px;
    	width:100px;
    	height:15px;
    	line-height:15px;
    	text-align:center;
    	border:1px solid #e0e0e0;
    	background:#fff;
    	cursor:pointer;
    	z-index:15000;
    }
    
    #tishi{
        width:350px;
        height:88px;
        background:#23AC38;
       display:none;
    }

   #woxihuan{
    width:350px;
    height:88px;
    background:#23AC38;
    display:none;
    }

    .dialog-content {
        width:100%;
        height:40px;
        padding-top:10px;
        text-align:center;
        font-size: 16px;
        line-height:40px;
        color:white;
      
    }

   
    </style>
    <div id="datu">
        <img src="" alt="" width="100%" height="100%">
    </div>
    <div id="tishi">
         <div class="dialog-main">
              <div class="dialog-content"><span>亲&nbsp;,&nbsp;你&nbsp;还&nbsp;没&nbsp;有&nbsp;登&nbsp;陆&nbsp;!&nbsp;!&nbsp;!&nbsp;!</span></div>
        </div>
    </div>
    <div id="woxihuan">
        <div class="dialog-main">
             <div class="dialog-content"><p>商品已收藏</p></div>
        </div>
    </div>
    <div id="page">
		<a onclick="pageScroll()">返回顶部</a> 
	</div>
     <!-- 弹框登陆 -->
    <div class="quc-panel-land quc-panel quc-wrapper " style="top: 31.5px; left: 401.5px; position: fixed;"id="quc-panel"> 
       <div class="quc-panel-hd"> 
            <div class="quc-panel-title"> 
             <span>欢迎登录360</span> 
            </div> 
         <a class="quc-panel-close" href="#"> <i>关闭</i></a> 
       </div> 

       <div class="quc-panel-bd"> 
            <div class="quc-mod-sign-in quc-mod-normal-sign-in"> 
                <div class="quc-tip-wrapper"> 
                   <p class="quc-tip quc-tip-error"></p> 
                </div>
                <div class="quc-main"> 
                      <form class="quc-form" action="" method="post" id="Form"> 
                      <!-- 账号 -->
                           <p class="quc-field quc-field-account quc-input-long">
                             <label class="quc-label" for="quc_account_510863054">帐&nbsp;&nbsp;&nbsp;号</label>
                             <span class="quc-input-bg">
                                <input type="text" autocomplete="off" placeholder="手机号/用户名/邮箱" name="name" class="quc-input quc-input-account" id="quc_account" /></span></p>
                          
                          <!-- 密码 -->
                           <p class="quc-field quc-field-password quc-input-long"><label class="quc-label" for="quc_password_510863055">密&nbsp;&nbsp;&nbsp;码</label>
                             <span class="quc-input-bg">
                                <input type="password" placeholder="请输入您的密码" maxlength="20" name="passpwd" class="quc-input quc-input-password" id="quc_password" /></span></p>
                        
                           <!-- 立即登陆 -->
                           <p class="quc-field quc-field-keep-alive">
                             <label>
                                     {{ csrf_field() }}
                                <input type="checkbox" checked="checked" name="iskeepalive" class="quc-checkbox quc-checkbox-keep-alive" />下次自动登录</label></p>
                          
                           <p class="quc-field quc-field-submit">
                                  <button id="but">立即登陆</button></p>
                      </form>

                       <p class="quc-field quc-field-third-part">
                           <span>其他帐号登录：</span>
                           <span class="quc-third-part">
                                <a title="新浪微博登录" class="quc-third-part-icon quc-third-part-icon-sina" href="#"></a>
                                <a title="人人登录" class="quc-third-part-icon quc-third-part-icon-renren" href="#"></a>
                                <a title="飞信登录" class="quc-third-part-icon quc-third-part-icon-fetion" href="#"></a>
                                <a title="天翼登录" class="quc-third-part-icon quc-third-part-icon-telecom" href="#"></a>
                           </span>
                      </p>               
                </div>
                <div class="quc-footer">
                     <a href="#" class="quc-link quc-link-grey quc-link-sign-up">注册新帐号</a> &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
                     <a target="_blank" href="{{URL('/Home/retpwd/retpwd')}}" class="quc-link quc-link-about quc-link-about-normal"style="color:#0082CB">忘记密码？</a>
                </div>
            </div>
       </div>
    </div>
    <!-- 弹框登陆 -->

<script type="text/javascript">
    //减法号
    $('.decrement').click(function(){

        //获取中间的数字
        var res = parseInt($(this).next().next().val());

        var r = 0;
        //减1
        if(res == 1) {

            r = 1;
        } else {

            r = res -1;
        }
       

        //写入
        $(this).next().next().val(r);
    })

    //加法号
    $('.increment').click(function(){
     //获取中间的数字
      var res = parseInt($(this).prev().val());

      //加1
      var r = res+1;

      //写入
      $(this).prev().val(r);

    })

    //评论赞赞
    $(".dian").click(function(){
       //获取里面的值
       var v = parseInt($(this).next().html());
      
       var zv = v + 1;

       //获取评论id
       var id = $(this).parents(".time-comment").find(".id").html();

       var z = $(this);
       //发送ajax
       $.get("/Home/goodsdetails/zan",{id:id,zv:zv},function(data){
            if(data == "yes") {
                z.next().html(zv);
            } else {
                z.next().html();
            } 
       })
    })

    //商家回复
    $(".replycom").each(function(){
        
       $(this).click(function(){

            $(this).parents(".comments").find(".reply").slideToggle();
        })
    })


    //评价图片边框
    $(".center-comment-img img").hover(
        function(){
        $(this).css("border",'solid 3px #FF6600');
      },function(){
        $(this).css("border","solid 3px #F0F0F0");
    })

    //点击小图片显示大图片
    $(".dianji").click(function(){
         $(this).parents(".right-comment").find(".commentimg").show(500);
    })

    //点击收起隐藏大图片
    $(".shouqi").click(function(){
         $(this).parent().hide(500);
    })

    //加入购物车
    $("#gwc").submit(function(){
        //获取所有值
        var gwcv = $(this).serialize();
        //发送ajax
        $.post("/Home/goodsdetails/goods",gwcv,function(data){
            if(data == "no") {  
                $("#quc-panel").show();
                $('#main').show();
                //账号框获取焦点
               $('#quc_account').focus().css("border","solid 1px #6ED42A");
            } else {
              location.href="/Home/car/add?"+gwcv;
            }
        })
        return false;
    })

$('#quc-panel').css({top:'50%',left:'50%',margin:'-'+($('#quc-panel').height() / 2)+'px 0 0 -'+($('#quc-panel').width() / 2)+'px'});

//点击关闭时登陆框隐藏
$('.quc-panel-close').click(function(){
    $('.quc-panel-land').hide();
    $('#main').hide();
})

/**
*   判断输出值 改变相应的样式
    @param bool 布尔值 true表示真  false 表示假
    @param elem  当前元素
    @param submitNeedparam  提交表单需要需要判断的变量名称
    @param errorMsg  错误信息描述
*/

 function errors(num)
 {
    switch(num){
        case 1:
            return check(false,$('.quc-tip'),'UV','请输入360账号');
        break;
        case 2:
            return check(false,$('.quc-tip'),'PV','请输入密码');
        break;
        case 3:
            return check(false,$('.quc-tip'),'UV','用户名不存在');
        break;
        case 4:
            return check(false,$('.quc-tip'),'PV','密码不正确');
        break;
        case 5:
            return check(false,$('.quc-tip'),'UV','你的号被禁用 请联系管理员');
        break;
        case 6:
            return check(false,$('.quc-tip'),'UV','登陆失败');
        break;
    }

    function check(bool,elem,submitNeedparam,errorMsg)
    {
            eval(submitNeedparam + '=' + bool);

            elem.css("color","red");
            elem.text(errorMsg);
            return bool;
    }

 }

 
var UV=0, PV =0;

//账号框失去焦点
$('#quc_account').blur(function(){
    $(this).css("border","solid 1px #B7B7B7");
})
//账号框获取焦点
$('#quc_account').focus(function(){
    $(this).css("border","solid 1px #6ED42A");
})
//密码框获取焦点
$('#quc_password').focus(function(){
    $(this).css("border","solid 1px #6ED42A");
})

//密码框失去焦点
$('#quc_password').blur(function(){
    $(this).css("border","solid 1px #B7B7B7");
})

 
 //提交按钮
 $('#Form').submit(function(){
    
    //判断账号
    if(!$('#quc_account').val()) {
        return errors(1);
    }

    //判断密码
    if(!$('#quc_password').val()) {
        return errors(2);
    }
   
    var forms = $(this).serialize();
   
    //发送ajax
    $.post("/Home/goodsdetails/login",forms,function(data){
        
        if(data != 7) {
           return errors(parseInt(data));
        } else {
            location.href="/Home/goodsdetails/goodsdetails?id="+$("#id").val();
        } 
    })
      return false;
 })


//返回顶部
function pageScroll(){
//把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
window.scrollBy(0,-100);
//延时递归调用，模拟滚动向上效果
scrolldelay = setTimeout('pageScroll()',100);
//获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
if(sTop==0) clearTimeout(scrolldelay);
} 


//小图放大
$(".tinypic").each(function(){
   $(this).click(function(){
      var img = $(this).find('img').attr("src");
       $("#datu").find('img').attr("src",img);
       layer.open({
       type: 1,
       title: false,
       closeBtn: 0,
       area: '416px',
       skin: 'layui-layer-nobg', //没有背景色
       shadeClose: true,
       content: $('#datu')
     })
   })
})


//点击喜欢
$(".favorite").click(function(){
    var id = $("#id").val();

    //发送ajax判断
    $.get("/Home/goodsdetails/xihuan",{id:id},function(data){
          if(data == "no") {
              layer.open({
                  type: 1,
                  skin: 'layui-layer-demo', //样式类名
                  closeBtn: 0, //不显示关闭按钮
                  shift: 2,
                  shadeClose: true, //开启遮罩关闭
                  content: $("#tishi")
                });
            } else {
                layer.open({
                  type: 1,
                  skin: 'layui-layer-demo', //样式类名
                  closeBtn: 0, //不显示关闭按钮
                  shift: 2,
                  shadeClose: true, //开启遮罩关闭
                  content: $("#woxihuan")
                });
            }
    })
})


</script>
@endsection

